import dayjs from "dayjs";
import { App, Button, Card, Space, Tooltip, Typography } from 'antd';
import { useEffect, useState } from "react";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
import { findByStaffId, removeClassInfo } from "../api";
import { weekDay } from "@/utils/date";

const { Text } = Typography;

const StaffDetail = ({ cell, callback }) => {

    const { modal, message } = App.useApp();

    const [detail, setDetail] = useState([]);
    const [day, setDay] = useState(null);

    const onReloadStaffClassDetail = () => {
        if (!cell) {
            return;
        }
        setDay(cell.date + ' (' + weekDay(cell.date, 'YYYY-MM-DD') + ')');

        let data = {
            startDate: dayjs(cell?.date).format('YYYY-MM-DD'),
            endDate: dayjs(cell?.date).format('YYYY-MM-DD'),
        };

        let query = {
            id: cell?.staffId,
            data,
        }
        findByStaffId(query).then(resp => {
            // 全部事件
            let events = [];
            resp?.data?.forEach((each) => {
                let detail = {
                    staffId: cell?.staffId,
                    staffName: cell?.staffName,
                    staffCode: cell?.staffCode,
                    id: each.id,
                    title: each.name,
                    date: each.workDate,
                    start: dayjs(each.startTime, 'HH:mm:ss').format('HH:mm'),
                    end: dayjs(each.endTime, 'HH:mm:ss').format('HH:mm'),
                    backgroundColor: each.color,
                    borderColor: each.color,
                    editable: false,
                };
                events.push(detail);
            });
            setDetail(events);
        });
    }

    const onRemoveStaffClassHandler = (model) => {
        modal.confirm({
            title: '确认删除',
            content: '确定要删除这条数据吗？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                removeClassInfo(model.id).then(resp => {
                    if (resp?.data) {
                        message.success('删除成功');
                        // setEvents(events.filter(each => each.id != model.id));
                        onReloadStaffClassDetail();
                    } else {
                        message.error(resp?.message || '删除失败');
                    }
                });
            }
        });
    }

    // TODO 因表结构问题，此处暂时不做编辑功能
    const onEditStaffClassHandler = (event) => {
        callback(event);
    }

    useEffect(() => {
        onReloadStaffClassDetail();
    }, [cell]);

    return (
        <div style={{ borderLeft: '1px solid #e8e8e8', padding: 8, width: '20%', margin: '8px 0 0 12px', overflow: 'auto' }}>
            {cell ? (
                <div className="detail-panel">
                    <Space style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        width: '100%',
                        marginBottom: 20,
                        paddingBottom: 8,
                        borderBottom: '1px solid #f0f0f0',
                        alignItems: 'center'
                    }}>
                        <Text strong style={{ fontSize: '15px', color: 'rgba(0, 0, 0, 0.85)', fontWeight: 500 }}>
                            {day}
                        </Text>
                        <Space size="small">
                            <Button
                                type="link"
                                size="small"
                                style={{
                                    color: '#1890ff',
                                    padding: '0 6px',
                                    fontSize: '14px',
                                }}
                                onClick={() => onEditStaffClassHandler(cell)}
                            >
                                排班
                            </Button>
                        </Space>
                    </Space>

                    {detail?.length > 0 ? (
                        <div style={{ marginTop: 16, display: 'grid', gap: '12px' }}>
                            {detail.map((event, index) => (
                                <Card key={index} size="small"
                                    style={{ borderLeft: `2px solid ${event.color || '#1890ff'}` }}
                                    title={
                                        <Text strong>
                                            {event.title}
                                        </Text>
                                    }
                                    extra={
                                        <Space>
                                            {/* <Tooltip title='编辑'>
                                                <Button
                                                    size='small'
                                                    type="text"
                                                    icon={<EditOutlined style={{ color: '#1890ff' }} />}
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        onEditStaffClassHandler(event);
                                                    }}
                                                />
                                            </Tooltip> */}
                                            <Tooltip title='删除'>
                                                <Button
                                                    size='small'
                                                    type="text"
                                                    icon={<DeleteOutlined style={{ color: '#ff4d4f' }} />}
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        onRemoveStaffClassHandler(event);
                                                    }}
                                                />
                                            </Tooltip>
                                        </Space>
                                    }
                                >
                                    <div>
                                        <p>工号: {event.staffCode || ''}</p>
                                        <p>姓名: {event.staffName || ''}</p>
                                        <p>时间: {event.start} ~ {event.end}</p>
                                        <p>备注: {event.remark || '-'}</p>
                                    </div>
                                </Card>
                            ))}
                        </div>
                    ) : (
                        <div style={{ textAlign: 'center', marginTop: 16, color: '#999', fontSize: '14px' }}>无排班数据</div>
                    )}
                </div>
            ) : (
                <div style={{ textAlign: 'center', color: '#999', padding: '40px 0' }}>
                    <p>点击表格单元格查看详情</p>
                </div>
            )}
        </div>
    );
}

export default StaffDetail;